<template>
  <div>
    <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
    <div v-for="item in goodDesc" class="infosbox">
      <img :src="`http://localhost:3000${item.img}`" alt="" />
      <p>{{ item.goodsname }}</p>
      <p>{{ item.price }}</p>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="cartNum"
          @click="add"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="changeSku"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="item.id"
        @add-cart="onAddCartClicked"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      uid: this.$utils.getUid(),
      goodDesc: {},
      show: false,
      goods: {},
      cartNum: "",
      sku: {
        tree: [
          {
            k: "颜色",
            k_s: "s1",
            v: [
              {
                id: "1",
                name: "蓝色",
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg",
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg",
              },
              {
                id: "2",
                name: "粉色",
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
          {
            k: "内存",
            k_s: "s2",
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "4G", // skuValueName：规格值名称
              },
              {
                id: "2", // skuValueId：规格值 id
                name: "8G", // skuValueName：规格值名称
              },
            ],
          },
        ],
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 200000, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2260, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 300000, // 价格（单位分）
            stock_num: 60, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 320000, // 价格（单位分）
            stock_num: 30, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 280000, // 价格（单位分）
            stock_num: 200, // 当前 sku 组合对应的库存
          },
        ],
        price: "1999", // 默认价格（单位元）
        stock_num: 400, // 商品总库存
      },
    };
  },
  created() {},
  mounted() {
    this.goodsinfos(this.$route.query.id);
  },
  methods: {
    goodsinfos(id) {
      this.$api.Retgoodsinfo({ id }).then((res) => {
        console.log(res);
        this.goodDesc = res.data.list;
        // this.goods = { picture: this.goodDesc.img };
        // this.goods = { picture: this.$pre + res[0].img };
      });
    },
    changeSku() {
      this.show = true;
    },
    onAddCartClicked(info) {
      // console.log(this.uid);
      let { goodsId, selectedNum } = info;
      console.log(info);
      this.$api
        .reqAddCart({ goodsid: goodsId, uid: this.uid, num: selectedNum })
        .then((res) => {
          console.log(res);
          this.show = false; 
          this.cartNum = res.data.list.cartCount; 
          this.$notify({
            type: "success",
            message: "添加成功！",
          });
        });
    },
    add() {
      this.$router.push("/shoop");
    },
  },
};
</script>
<style scoped lang="scss">
.infosbox {
  width: 100%;
  height: 800px;
  // background-color: red;
  img {
    width: 100%;
    // height: 100%;
  }
}
</style>
